<template>
  <p>五种基本排序：</p>
  <br />

  <p>测试数组：</p>
  <p>{{ testArr }}</p>
  <br />

  <button
    v-for="sortMethod in sortMethodsArr"
    @click="handleClickSortMethod(sortMethod.type, testArr)"
  >
    {{ sortMethod.name }}
  </button>
  <p><br /></p>

  <p>结果数组：</p>
  <p>{{ resultArr }}</p>
  <br />

  <button @click="productRandomArr(20)">重新生成随机数</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  bubbleSort,
  selectSort,
  insertSort,
  mergeSort,
  quickSort,
} from './index'

const sortMethodsArr = reactive([
  {
    name: '冒泡排序',
    type: 'bubble',
  },
  {
    name: '选择排序',
    type: 'select',
  },
  {
    name: '插入排序',
    type: 'insert',
  },
  {
    name: '归并排序',
    type: 'merge',
  },
  {
    name: '快速排序',
    type: 'quick',
  },
])

// 方法映射
const methodsMap = {
  bubble: bubbleSort,
  select: selectSort,
  insert: insertSort,
  merge: mergeSort,
  quick: quickSort,
}

// 触发排序func
const handleClickSortMethod = (type, arr) => {
  resultArr.value = [...methodsMap[type].default([...arr])]
}

/**生成0-n的随机数，赋值给testArr */
const productRandomArr = (n: number) => {
  const arr: number[] = []
  for (let i = 0; i < n; i++) {
    arr.push(Math.ceil(Math.random() * 1000))
  }
  testArr.value = [...arr]
}

// 测试数组
const testArr = ref<number[]>([])

// 结果数组
const resultArr = ref<number[]>([])

// 初始化生成随机数一次
productRandomArr(20)
</script>
